<template>
  <div>
    <vxe-grid v-bind="reportOptions" :height="height">
      <template #operate="{ row }">
        <el-button type="primary" link @click="viewEvent(row, 1)">
          详情
        </el-button>
        <el-button type="primary" link @click="viewEvent(row, 2)">
          填报
        </el-button>
      </template>
      <template #pager>
        <!--使用 pager 插槽-->
        <vxe-pager
          v-model:current-page="reportTablePage.currentPage"
          v-model:page-size="reportTablePage.pageSize"
          :layouts="[
            'Sizes',
            'PrevJump',
            'PrevPage',
            'Number',
            'NextPage',
            'NextJump',
            'FullJump',
            'Total',
          ]"
          :total="reportTablePage.total"
          @page-change="reportPageChange"
        />
      </template>
    </vxe-grid>
  </div>
</template>

<script setup lang="ts">
  import {
    reactive,
    ref,
    inject,
    onBeforeMount,
    onBeforeUnmount,
    onMounted,
  } from 'vue'
  import { useRouter, useRoute } from 'vue-router'
  import { reportOptions } from '../table/column'
  import { VxeGridProps, VxePagerEvents } from 'vxe-table'
  import { getQuarterlyList } from '@/api/postdoctor'
  import { get } from 'lodash'

  const router = useRouter()
  const route = useRoute()
  const reportTablePage = reactive({
    total: 0,
    currentPage: 1,
    pageSize: 10,
  })

  const reportPageChange: VxePagerEvents.PageChange = ({
    currentPage,
    pageSize,
  }) => {
    reportTablePage.currentPage = currentPage
    reportTablePage.pageSize = pageSize
  }

  const viewEvent = (item, type) => {
    if (type == 1) {
      router.push({
        path: '/postdoctor/personnel/reportDetails',
        query: { quarterlyId: item.id },
      })
    }
    if (type == 2) {
      router.push({
        path: '/postdoctor/personnel/quarterlyReport',
        query: { quarterlyId: item.id, id: route.query.id },
      })
    }
  }

  const getList = () => {
    const params = {
      pageNo: reportTablePage.currentPage,
      pageSize: reportTablePage.pageSize,
      personnelId: route.query.id,
    }
    getQuarterlyList(params).then((res) => {
      reportOptions.data = res.data.list
      reportTablePage.total = res.data.total
    })
  }

  onMounted(() => {
    getList()
  })

  const height = ref(0)
  const $baseTableHeight = inject('$baseTableHeight')
  onBeforeMount(() => {
    window.addEventListener('resize', handleHeight)
  })

  onBeforeUnmount(() => {
    window.removeEventListener('resize', handleHeight)
  })

  const handleHeight = () => {
    height.value = $baseTableHeight(0)
  }
</script>

<style scoped></style>
